<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useAuthStore } from '@/store/modules/auth';
import { getWelcomeMessage } from '@/service/api/common/welcome';
import { useLocation } from '@/hooks/common/location';
defineOptions({
  name: 'HeaderBanner'
});
const initLoading = ref<boolean>(true);
const appStore = useAppStore();
const authStore = useAuthStore();
const messageRef = ref<string>('');
const gap = computed(() => (appStore.isMobile ? 0 : 16));

interface StatisticData {
  id: number;
  label: string;
  value: string;
}

const getMessage = async () => {
  initLoading.value = true;
  // let locationData;

  // try {
  //   locationData = await useLocation();
  // } catch (err) {
  //   console.error('Failed to get location:', err);
  //   window.$message.error('获取位置信息失败');
  //   // Proceed with default or empty location data
  //   locationData = { latitude: 0, longitude: 0, location: '0:0' };
  // }

  try {
    const { data, error } = await getWelcomeMessage({ location: '0:0' });

    if (error) throw new Error('Failed to fetch message');

    const { message } = data?.data || {};
    if (message) {
      console.log(message);
      messageRef.value = message;
    }
  } catch (err) {
    console.error(err);
  } finally {
    initLoading.value = false;
  }
};
const statisticData = computed<StatisticData[]>(() => [
  {
    id: 0,
    label: $t('page.home.projectCount'),
    value: '25'
  },
  {
    id: 1,
    label: $t('page.home.todo'),
    value: '4/16'
  },
  {
    id: 2,
    label: $t('page.home.message'),
    value: '12'
  }
]);
getMessage();
</script>

<template>
  <NCard :bordered="false" class="card-wrapper pb-10px pt-10px">
    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
      <NGi span="24 s:24 m:18">
        <div class="flex-y-center">
          <div class="size-72px shrink-0 overflow-hidden rd-1/2">
            <NSkeleton v-if="initLoading" circle class="size-full" />
            <img v-else :src="authStore.userInfo?.user?.avatar" class="size-full" />
          </div>
          <div v-if="initLoading" class="w-100% pl-12px">
            <NSkeleton width="50%" height="25px" class="text-18px font-semibold" :sharp="false" />
            <NSkeleton width="50%" height="20px" class="m-t-15px text-#999 leading-30px" :sharp="false" />
          </div>
          <div v-else class="pl-12px">
            <h3 class="text-18px font-semibold">
              {{ messageRef }}
            </h3>
            <p class="text-#999 leading-30px">{{ $t('page.home.weatherDesc') }}</p>
          </div>
        </div>
      </NGi>
      <NGi span="24 s:24 m:6">
        <NSpace :size="24" justify="end">
          <NStatistic v-for="item in statisticData" :key="item.id" class="whitespace-nowrap" v-bind="item" />
        </NSpace>
      </NGi>
    </NGrid>
  </NCard>
</template>

<style scoped></style>
